<template>
	<div class="main">
		<div :class="['item',{'item-rows':index==0}]" v-for="(item,index) in lists" :key="item.id" :style="'background:url(\''+require('@/'+item.src)+'\');background-size: 100%;'">
			<aside>
				<p>{{item.title}}</p>
				<span v-if="index==0">{{item.hot}}</span>
			</aside>
		</div>
	</div>
</template>

<script>
	export default {
		name:'Menus',
		data(){
			return {
				lists:[
					{id:1,title:'主题游',hot:'个性独创',src:'assets/img/menus/1.png'},
					{id:2,title:'亲子游',src:'assets/img/menus/2.png'},
					{id:3,title:'摄影游',src:'assets/img/menus/3.png'},
					{id:4,title:'户外游',src:'assets/img/menus/4.png'},
					{id:5,title:'活动赛事',src:'assets/img/menus/5.png'},
					{id:6,title:'瑜伽行',src:'assets/img/menus/6.png'},
					{id:7,title:'野奢邦',src:'assets/img/menus/7.png'},
					{id:8,title:'定制游',src:'assets/img/menus/8.png'},
					{id:9,title:'签证',src:'assets/img/menus/9.png'},
					{id:10,title:'邮轮',src:'assets/img/menus/10.png'},
					{id:11,title:'美宿度假',src:'assets/img/menus/11.png'},
				]
			}
		}
	}
</script>

<style scoped>
	.main{
		width: 95%;
		margin: 0.4rem auto 0;
		overflow: hidden;
		border-radius: 0.3rem;
	}
	.item{
		float: left;
		width: 25%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 1.25rem;
		font-size: 0.35rem;
		font-weight: bold;
		overflow: hidden;
		text-align: center;
	}
	.item-rows{
		height: 2.5rem;
	}
	.item p,
	.item span{
		line-height: 0.6rem;
	}
	.item span{
		padding: 0.02rem 0.1rem;
		font-size: 0.3rem;
		background-color: #FFDD40;
		border-radius: 1rem
	}
</style>
